<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<script src="${ctxStatic}/common/player.js"></script>
<style>
    #contactorForm .control-label{
        width: 80px !important;
    }
    #contactorForm .controls {
        margin-left: 120px;
    }
</style>
 <div style="margin-top:10px;padding-bottom: 10px;">
    <ul class="nav nav-tabs" style="margin-bottom: -1px;">
        <li id="contactor" class="active"><a href="#contactor-pane" data-toggle="tab">联系人信息</a></li>
        <li id="merger" class=""><a href="#merger-pane" data-toggle="tab">合并数据</a></li>
        <li id="sale" class=""><a href="#sale-pane" data-toggle="tab">成单信息</a></li>
    </ul>
    <div class="tab-content" style="overflow: inherit;">
        <div class="tab-pane active" id="contactor-pane">
            <table id="contactorTable" class="table table-striped table-condensed table-hover"
                   data-url="${ctx}/customer/potentialContactor/listContactorData">
                <thead>
                <tr>
                    <th colspan="10">
                        <ul class="nav nav-toolbar">
                            <li><a href="javascript:void(0)" id="addContactorBtn">新增联系人</a></li>
                        </ul>
                    </th>
                </tr>
                <tr>
                    <th data-id-field="id" data-visible="false">id</th>
                    <th data-field="name" data-align="center">姓名</th>
                    <th data-field="identity" data-align="center">身份</th>
                    <th data-field="mobile" data-align="center" data-formatter="callFormatter">手机</th>
                    <th data-field="telephone" data-align="center" data-formatter="callFormatter">固定电话</th>
                    <th data-field="qq" data-align="center">QQ</th>
                    <th data-field="wechat" data-align="center">微信</th>
                    <th data-field="email" data-align="center">邮箱</th>
                    <th data-field="detail" data-align="center">备注</th>
                    <th data-field="operate" data-align="center" data-events="contactorOperateEvents"
                        data-formatter="contactorOperate">操作
                    </th>
                </tr>
                </thead>

            </table>
	        <div id="contactorModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="top:0px;" >
	             <div class="modal-header">
	                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                 <h5 id="modalLabel">新增联系人</h5>
	             </div>
	             <div class="modal-body">
	                <form id="contactorForm" method="post" class="form-horizontal">
	                	<input type="hidden" id="potentialCustomer" name="potentialCustomerId" value="${id}">
	                	<input type="hidden" id="contactorId" name="id" value="">
	                    <div class="control-group">
	                        <label class="control-label">姓名：</label>
	
	                        <div class="controls">
	                            <input name="name" type="text" maxlength="10" class="input-medium required"/>
	                            <span class="help-inline"><font color="red">*</font> </span>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">身份：</label>
	
	                        <div class="controls">
	                            <input name="identity" type="text" maxlength="20" class="input-medium"/>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">手机：</label>
	
	                        <div class="controls">
	                            <input name="mobile" type="text" onkeyup="this.value = this.value.replace(/[^\d]/g,'')" maxlength="11" class="input-medium mobile"/>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">固定电话：</label>
	
	                        <div class="controls">
	                            <input name="telephone" type="text" onkeyup="this.value = this.value.replace(/[^\d]/g,'')" maxlength="20" class="input-medium simplePhone"/>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">QQ：</label>
	
	                        <div class="controls">
	                            <input name="qq" type="text" maxlength="20" class="input-medium qq"/>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">微信：</label>
	
	                        <div class="controls">
	                            <input name="wechat" type="text" maxlength="50" class="input-medium"/>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">Email：</label>
	
	                        <div class="controls">
	                            <input name="email" type="email" maxlength="50" class="input-medium email"/>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <label class="control-label">备注：</label>
	                        <div class="controls">
	                        	<textarea rows="2" cols="50" name="detail" maxlength="64" class="input-medium"></textarea>
	                        </div>
	                    </div>
	                </form>
	            </div>
	            <div class="modal-footer">
	                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
	                <button class="btn btn-primary" type="button" id="addContactSubmitBtn">保存</button>
	            </div>
        	</div>
        </div>
        <div class="tab-pane" id="merger-pane">
            <table id="mergerTable" class="table table-striped table-condensed table-hover"
                   data-url="${ctx}/customer/potentialCustomer/listMergerData">
                <thead>
                <tr>
                    <th data-field="dateCreated" data-align="center">创建时间</th>
                    <th data-field="source" data-align="center">一级来源</th>
                    <th data-field="sourceDesc" data-align="center">二级来源</th>
                    <th data-field="corporationName" data-align="center">公司名称</th>
                    <th data-field="corporationUrl" data-align="center">公司域名</th>
                    <th data-field="mobile" data-align="center">手机</th>
                    <th data-field="operate" data-align="center" data-events="mergeOperateEvents"
                        data-formatter="mergerOperate">操作
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="tab-pane" id="sale-pane">
            <table id="saleTable" class="table table-striped table-condensed table-hover"
                   data-url="${ctx}/customer/potentialAfterSalesService/listSalesData">
                <thead>
                <tr>
                    <th data-field="dateCreated" data-align="center">成单时间</th>
                    <th data-field="productName" data-align="center">成单产品</th>
                    <th data-field="amount" data-align="center">成单金额</th>
                    <th data-field="year" data-align="center">年限</th>
                    <th data-field="gift" data-align="center">礼品</th>
                    <th data-field="board" data-align="center">牌匾</th>
                    <th data-field="backCash" data-align="center">返现</th>
                    <th data-field="invoice" data-align="center">发票</th>
                    <th data-field="phone" data-align="center">手机号</th>
                    <th data-field="detail" data-align="center">描述</th>
                    <th data-field="operate" data-align="center" data-formatter="saleOperate"
                        data-events="saleOperateEvents">操作
                    </th>
                </tr>
                </thead>
            </table>
            <div id="saleModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true" style="width: 800px;margin-left: -400px;">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                       <h5 id="saleModalLabel">修改成单信息</h5>
                   </div>
                   <div class="modal-body">
                   	<form id="saleForm" class="form-horizontal" method="post">
                   	<input type="hidden" name="potentialCustomerId" value="${vo.id}">
                   	<input type="hidden" id = "saleId" name="id" value="">
                        <div class="control-group">
                            <label class="control-label">
                                <span class="help-inline"><font color="red">*</font> </span>
                                成单产品：</label>
                            <div class="controls">
                                <sys:productType id="saleTargetProductsId" name="targetproducts" withWu="true"
                                                 withAll="false" cssClass="select-medium" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">
                                <span class="help-inline"><font color="red">*</font> </span>
                                成单年限：</label>
                            <div class="controls">
                                <input name="year" maxlength="2" type="text"
                                       class="required input-medium digits" data-rule-max="50" data-rule-min="1"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">
                                <span class="help-inline"><font color="red">*</font> </span>
                                成单金额：</label>
                            <div class="controls">
                                <input name="amount" type="text" class="input-medium required digits" data-rule-max="999999999" data-rule-min="1" maxlength="9"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">返现：</label>
                            <div class="controls">
                                <input name="backCash" type="text" maxlength="9" class="input-medium digits " data-rule-max="999999999" data-rule-min="0"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">牌匾：</label>
                            <div class="controls">
                                <input name="board" type="text" maxlength="32" class="input-medium "/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">礼品：</label>
                            <div class="controls">
                                <input name="gift" type="text" maxlength="32" class="input-xlarge "/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">发票：</label>
                            <div class="controls">
                                <input name="invoice" type="text" maxlength="32" class="input-xlarge "/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">电话：</label>
                            <div class="controls">
                                <input name="phone" type="text" maxlength="32" class="input-xlarge " data-rule-phone="true" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">收款人：</label>
                            <div class="controls">
                                <input name="receiver" type="text" maxlength="16" class="input-xlarge "/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">地址：</label>
                            <div class="controls">
                                <input name="address" type="text" maxlength="64" class="input-xlarge "/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">描述：</label>
                            <div class="controls">
                            	<textarea rows="3" cols="60" name="detail" maxlength="128" class="input-xlarge "></textarea>
                            </div>
                        </div>
					</form>
                 </div>
                 <div class="modal-footer">
                     <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                     <button class="btn btn-primary" type="button" id="addSaleSubmitBtn">保存</button>
                 </div>
            </div>
        </div>
    </div>
</div>

<div style="margin-top:20px;padding-bottom: 10px;">
    <ul class="nav nav-tabs" style="margin-bottom: -1px;">
        <li class="active"><a href="#visitRecord-pane" data-toggle="tab">销售跟踪信息</a></li>
        <li class=""><a href="#sound-pane" data-toggle="tab">音频信息</a></li>
        <li class=""><a href="#dist—pane" data-toggle="tab">分配记录</a></li>
    </ul>

    <div class="tab-content" style="overflow: inherit;">
        <div class="tab-pane active" id="visitRecord-pane">
            <table id="visitRecordTable" class="table table-striped table-condensed table-hover"
                   data-url="${ctx}/customer/visitRecord/listVisiData">
                <thead>
                <tr>
                    <th data-field="targetProductsName" data-align="center">跟进产品</th>
                    <th data-field="dateCreated" data-align="center">跟进时间</th>
                    <th data-field="customerStatus" data-align="center">跟进状态</th>
                    <th data-field="customerStatusDetail" data-align="center">状态明细</th>
                    <th data-field="visitRecord" data-align="center">跟进记录</th>
                    <th data-field="appointment" data-align="center" data-formatter="appointment">预约提醒</th>
                    <th data-field="operationType" data-align="center" data-formatter="visitRecordOperationType">操作动作</th>
                    <th data-field="createUser" data-align="center">操作人</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="tab-pane" id="sound-pane">
            <table id="soundTable" data-url="${ctx}/customer/potentialCall/listCallData">
                <thead>
                <tr>
                    <th data-field="serviceDirect" data-align="center" data-formatter="serviceDirectFormat">呼叫类型</th>
                    <th data-field="toPhone" data-align="center">呼叫号码</th>
                    <th data-field="startDate"  data-align="center">接通时间</th>
                    <th data-field="endDate"  data-align="center">挂断时间</th>
                    <th data-field="alertTime" data-align="center">振铃时长</th>
                    <th data-field="callTime"  data-align="center">通话时长</th>
                    <th data-field="fromUserName"  data-align="center">坐席人员</th>
                    <%--
                    <th data-field="disconnectType" data-align="center" data-formatter="disconnectTypeFormat">挂机方式</th>
                    --%>
                    <th data-align="center" data-events="operateEvents" data-formatter="callOperation">操作</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="tab-pane" id="dist—pane">
            <table id="distTable" class="table table-striped table-condensed table-hover"
                   data-url="${ctx}/customer/potentialDistRecord/listDistData">
                <thead>
                <tr>
                    <th data-field="dateCreated" data-align="center">分配时间</th>
                    <th data-field="createUser" data-align="center">分配人</th>
                    <th data-field="executor" data-align="center">执行人</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>